<script setup>
import Srs from './utils.js'
import WebRtc from './webRtc.js'
import {nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
const localVideo = ref()
const remoteVideo = ref()
const webrtc = shallowRef()
const localStream = shallowRef()

const player = shallowRef()


const initWebRtc = async () => {
  // webrtc.value = new WebRtc()
  // localStream.value.srcObject = await webrtc.value.getUserMedia()
  webrtc.value = new Srs.SrsRtcPlayerAsync()
  webrtc.value.play('webrtc://hlaxhk.com:1985/live/test?eip=hlaxhk.com')
  // // video标签
  remoteVideo.value.srcObject = webrtc.value.stream
  remoteVideo.value.play()
}

const startLink = (stream) => {
  // console.log("获取stream成功！");
  //本地画面预览
  localVideo.value.srcObject = stream;
  localStream.value = stream;
  // 添加本地媒体流的轨道都添加到 RTCPeerConnection 中
  // localStream.value.getTracks().forEach((track) => {
  //   pc.addTrack(track, localStream.value)
  // })

}

onMounted(() => {
  nextTick(() => {
    initWebRtc()
  })
})


onBeforeUnmount((() => {
  webrtc.value.close()
  webrtc.value = null
}))
</script>

<template>
  <div style="margin: auto; display: flex;gap:20px">
    <iframe src="http://8.137.77.201/?id=1" style="width: 350px; height: 350px" />
    <div>
      本地视频的画面
      <video
          autoplay="autoplay"
          ref="localStream"
          id="localStream"
          controls="controls"
          class="local"
      ></video>
    </div>
    <div>
      远程视频的画面
      <video
          autoplay
          muted
          ref="remoteVideo"
          id="remoteVideo"
          controls="controls"
          class="local"
      ></video>
    </div>
    <button @click="initWebRtc()">推流</button>
    </div>
</template>

<style scoped>
.local {
  width:360px;
  height: 300px;
}
</style>